<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="用户ID" width="70">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="姓名">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="昵称">
        <template slot-scope="scope">
          {{ scope.row.nickName }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="135">
        <template slot-scope="scope">
          <router-link :to="`/userApply/applydetail/${scope.row.openid}`">
            <el-button
              type="primary"
              class="el-icon-tickets"
              title="详细信息"
              size="mini"
              round
            ></el-button>
          </router-link>
          <el-button
            @click="isDelete(scope.row.openid)"
            type="danger"
            class="del_btn el-icon-delete"
            title="删除用户"
            size="mini"
            round
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column label="电话" width="120" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100" align="center">
        <template slot-scope="scope">
          <el-tag :type="statusSelector(scope.row.status)">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="接单权限" width="80" align="center">
        <template slot-scope="scope">
          <el-switch
            active-color="#13ce66"
            inactive-color="#ff4949"
            :value="scope.row.status === '已认证' ? true : false"
            @change="allowChange(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="create_at"
        label="最后一次修改时间"
        width="180"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.create_at | showTime }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { parseTime } from "@/utils/index";
import { getUserList, deleteUser, updateUser } from "@/api/consumer";
export default {
  data() {
    return {
      list: null, //用户列表
      listLoading: true //页面是否在渲染
    };
  },
  created() {
    this.fetchData(); // 初始化时渲染界面
  },
  methods: {
    // 渲染列表
    fetchData() {
      getUserList().then(res => {
        this.list = res.data.data;
        this.listLoading = false;
      });
    },
    statusSelector: function(s) {
      const statusMap = {
        待认证: "info",
        待审核: "danger",
        未通过: "warning",
        已认证: "success"
      };
      return statusMap[s];
    },
    // 删除
    isDelete(openID) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // 发删除请求
        deleteUser(openID)
          .then(() => {
            this.fetchData();
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          })
          .catch(error => {
            this.$message({
              type: "danger",
              message: "删除失败,错误信息:" + error
            });
          });
      });
    },
    // 状态开关
    allowChange(row) {
      if (row.status == "已认证") {
        updateUser(row.openid, { status: "待认证" }).then(res => {
          this.$message({
            message: res.data.meta.msg,
            type: "success"
          });
          row.status = "待认证";
        });
      } else {
        updateUser(row.openid, { status: "已认证" }).then(res => {
          this.$message({
            message: res.data.meta.msg,
            type: "success"
          });
          row.status = "已认证";
        });
      }
    }
  },
  filters: {
    // 时间展示
    showTime(t) {
      return parseTime(new Date(t));
    }
  }
};
</script>

<style scoped>
.del_btn {
  margin-left: 24px;
}
</style>
